<template>
  <div style="width: 430px;height: 700px">
    <!--    顶部-->
    <div style="width: 100%;height: 50px; float: left;">
        <span style="float: left;margin-left: 15px;font-size: 25px" @click="towalletindex">
          <i class="el-icon-arrow-left"></i>
        </span>
      <span style="float: left;font-size: 20px;margin-left: 100px">
        开通免密支付
        </span>
    </div>
    <!--    中间-->
    <div style="width: 100%;height: 833px;background:#f3fcff; float: left;">
      <div style="width: 100%;height: 50px;font-size: 20px;font-weight: bold;line-height: 50px; margin-left: 140px">
        微信免密支付
      </div>
      <div style="width: 350px;height: 720px;margin: auto;position: relative;">
        <div style="width: 350px; height: 60px;text-align: center;line-height: 60px">
          <div style="height: 60px;width: 120px;float: left;font-weight: bold;text-align: left">
            开通账号:
          </div>
          <div style="height: 60px;width: 230px;float: left;text-align: left">
            {{list.bankphone}}
          </div>
        </div>
        <div style="width: 350px; height: 60px;text-align: center;line-height: 60px">
          <div style="height: 60px;width: 120px;float: left;font-weight: bold;text-align: left">
            套餐内容:
          </div>
          <div style="height: 60px;width: 230px;float: left;text-align: left">
            免密支付车费,单次最高500元
          </div>
        </div>
        <div style="width: 350px; height: 100px; ">
          <div style="width: 350px;height: 60px;">
            <div style="height: 60px;width: 120px;float: left;font-weight: bold;text-align: left;line-height: 60px">
              优先扣款方式:
            </div>
            <div style="color: blue; height: 60px;width: 230px;float: left;text-align: left;line-height: 60px">
              零钱
            </div>
          </div>
          <div style="width: 350px;height: 40px;line-height: 40px;text-align: left">
            <span style="font-size: 14px;color: #6e6e6e">
              所选支付方式无法扣款时，将改用账号中其他支付方式
            </span>
          </div>
        </div>
        <el-button type="1primary" round style="margin-top: 25px;width: 330px;background: #2d83fb;color: white;"
                   @click="openPayment"
        >开通免密支付
        </el-button>
        <div style="position: absolute;bottom: 0;left: 0;width: 350px;height: 50px;line-height: 50px;margin-left: 50px">
          <span>您已阅读并同意</span>
          <span style="color: #288DFB">《扣款授权确认书》</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from 'axios';
export default {
  name: "openSecretfree",
  data() {
    return {
      user: null,
      driversWallet: null,
      list:[],
      id:''
    };
  },
  methods: {
    towalletindex(){
      this.$router.push('/secretfree')
    },
    openPayment() {
      const cardStatus=JSON.parse(localStorage.getItem('cardStatus'));
      // 修改状态
        axios.get(`/order/NCard/updateStatus?id=${this.id}`).then(res => {
          console.log(res)
          if (res.data.code == 200) {
            this.$message.error('开通失败')
          } else {
            this.$message.success('开通成功')
          }
        })
      //跳转页面
      this.$router.push('/secretfree')
      // 在这里添加开通免密支付的逻辑，比如调用后端API
      alert('已点击开通免密支付，请在后端处理相关逻辑。');
    },
    findCard(){
      const id=JSON.parse(localStorage.getItem('cardid'));
      this.id=id;
      axios.get(`/order/NCard/findCard?id=${id}`).then(res => {
        this.list = res.data;
        console.log(res)
      })
    }
  },
  created() {
    this.findCard();
    console.log('aaaaaaaaaaa')
  }
};
</script>
<style scoped>
</style>
